<template>
	<view>
		<!-- 1.0 搜索框组件 -->
		<search />
		<!-- 2、排序 tab  -->
		<tabs :tabs="tabs" @change="changeTabsIndex" />
		<!-- 3.0 商品列表结构 -->
		<scroll-view 
			scroll-y
			class="goods" 
			@scrolltolower="scrolltolowerHandle"
		>
			<block v-for="item in goods" :key="item.goods_id">
				<!-- 单个商品结构 -->
				<goodsItem :item="item" />
			</block>
			<!-- 底部的没有更多数据的提示模块 -->
			<!-- <view class="no_more_tip" :hidden="hasMore">😀我也是有底线的...</view> -->
			<view class="no_more_tip" v-if="!hasMore">😀我也是有底线的...</view>
		</scroll-view>
	</view>
</template>

<script>
/* 
  * 需求分析
  * 	1、搜索，直接用组件
  * 	2、排序 tab
  * 		2.1 布局
  * 		2.2 默认选中 “综合” 项
  * 		2.3 点击排序时，切换选中状态
  * 	3、商品列表
  * 		3.1 布局
  * 		3.2 根据 API 返回数据显示商品，接口地址 /goods/search
  * 		3.3 根据分类id显示商品
  * 				3.3.1 父页面通过URL传递参数，例如 url?cid=1。
	* 				3.3.2 子页面在onLoad生命周期接收参数，参数会以对象形式接收
  * 		3.4 上拉到底自动加载下一页
  * 				3.4.1 scrollview提供scrolltolower事件监听是否到达底部
  * 				3.4.2 当到达底部，重新请求商品数据，修改 pagenum
  *	4、页面下拉刷新
  *		4.1 在页面配置文件加入 enablePullDownRefresh 配置，设置为true
  *		4.2 在 onPullDownRefresh 页面事件处理下拉逻辑，处理完毕，调用uni.stopPullDownRefresh停止下拉
  *			😈 如果有异步处理，需要通过 await 等待处理完毕再调用停止下拉
*/
	import search from '@/components/search/main';
	import goodsItem from '@/components/goodsItem/main';
	import tabs from '@/components/tabs/main';
	// uni-app 行为写这里
	export default {
		components:{
			tabs,
			goodsItem,
			search
		},
		data() {
			return {
				// 商品列表数据
				goods: [],
				// 是否有更多数据的标记
				hasMore: true,
				// tabs 需要的数据
				tabs:[
					{ id: 1, text:'综合' },
					{ id: 2, text:'销量' },
					{ id: 3, text:'价格' },
				],
				// 选中状态的索引
				// activeIndex: 0,
				// 页面参数
				options: {},
				// 页码
				pagenum: 1,
				// 页容量
				pagesize: 10
			}
		},
		onLoad(options) {
			console.log('页面参数', options);		// {cid: 5}
			// 把页面参数存起来
			this.options = options;
			// 发送网络请求
			this.getGoodsList();
		},
		// uni-app 事件写到 methods 中
		methods: {
			// 下拉刷新的页面回调函数（注意：页面回调函数的函数名称是固定的）
			async onPullDownRefresh(){
				// console.log('页面下拉刷新的回调函数');
				// 初始化页码的数据
				this.goods = [];
				this.hasMore = true;
				this.pagenum = 1;
				// 在重新发送请求
				await this.getGoodsList();
				// 等上面请求结束后，结束掉下拉刷新的动画效果
				uni.stopPullDownRefresh();
			},
			// scroll-view 滚动触底事件
			scrolltolowerHandle(){
				console.log('滚动触底了');
				// 触底后页码加 1
				this.pagenum += 1;
				// 根据新的页码发送新的请求
				this.getGoodsList();
			},
			// 改变索引
			changeTabsIndex(index){
				// this.activeIndex = index;
				console.log('子组件传递给父组件的数据', index);
			},
			// 获取商品列表
			async getGoodsList(){
				// 如果没有更多数据数据，直接退出当前函数，不用往后发送请求了
				if(this.hasMore === false) {
					// uni.showToast({ title: '没有更多数据了...'});
					return;
				};
				// this.$https.get() 其实就是 axios.get()
				// await 的返回值其实是 Promise 对象内部的 resolve() 返回的数据
				const { goods } = await this.$https.get('/goods/search',{ 
					params:{
						// 页面参数
						...this.options,
						// 页码
						pagenum: this.pagenum,
						// 页容量
						pagesize: this.pagesize
					}  
				});
				// 获取到请求得到的数据
				// console.log(goods);

				/* 
					分支：
						1. 如果数组为长度为 0，代表分页已经没有数据了，把是否有更多数据的标记更新一下。
						2. 如果数组不为 0，就走正常业务。
				*/
				if(goods.length === 0){
					// 更新标记
					this.hasMore = false;
					// 提示用户没有更多数据了
					uni.showToast({ title: '没有更多数据了...'});
				}else{
					// 赋值更新 data 中的 goods 数据，最终更新视图中的列表
					// 🚩 注意这里的数组是新旧数据连在一起的，这里就是用到了数组解构和数组连接
					this.goods = [...this.goods, ...goods];
				}
			}
		}
	}
</script>

<style lang="less">
	.goods {
		padding: 10rpx;
		box-sizing: border-box;
		height: calc(100vh - 100rpx - 88rpx);
		/* #ifdef H5 */
		height: calc(100vh - 100rpx - 88rpx - 44px);
		/* #endif */
	}
	.no_more_tip{
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
